<template>

  <div >
    <!--内容区+侧边栏+头部-->
    <el-container>
      <!--侧边栏-->

      <el-aside
          :width="asideWidth"
          style="
          min-height: 100vh;
          background-color: #eeeeee ;
          margin-bottom: 5px;

          border-radius: 8px ;
          box-shadow: 2px 0 3px rgba(0, 0, 0, 0.4);"
      >

        <div
            style="background: white;
            height: 65PX;
            width: 100%;
            line-height: 60PX;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;"
        >
          <img src="../assets/logo 11.png" alt="logo" style="height: 50px;width: 50px;border-radius: 8px;">

          <img src="../assets/logo 1.png" alt="logo"  class="logo-title"  v-show="!isCollapse">

        </div>
        <el-menu  :collapse="isCollapse" :collapse-transition="false" router style="background-color:#eeeeee" :default-active=  "$route.path">
          <el-menu-item index="/index1">
            <el-icon :size="20">  <House/></el-icon>
            <span style="margin-left: 2px">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/order1">
            <el-icon :size="20">  <Shop/></el-icon>
            <span style="margin-left: 2px">订单管理</span>
          </el-menu-item>

          <el-menu-item index="/member1" >
            <el-icon :size="20">  <Avatar/></el-icon>
            <span style="margin-left: 2px">会员管理</span>
          </el-menu-item>

          <el-menu-item index="/goods">
            <el-icon :size="20">  <DataBoard/></el-icon>
            <span style="margin-left: 2px">商品管理</span>
          </el-menu-item>

          <el-menu-item index="/data1">
            <el-icon :size="20">  <DataAnalysis/></el-icon>
            <span style="margin-left: 2px">数据分析</span>
          </el-menu-item>

          <el-sub-menu index="11">
            <template #title>
              <el-icon :size="20" style="margin-left: 5px"><setting/></el-icon>
              <span >个人中心</span>
            </template>

            <el-menu-item index="/self1" >个人信息</el-menu-item>
            <el-menu-item index="/change">密码修改</el-menu-item>
          </el-sub-menu>

        </el-menu>

      </el-aside>
      <!--内容区+头部-->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <!-- 折叠按钮-->
          <i  style="width: 26px;align-content: center;" @click="handleCollapse"> <Menu/> </i>

          <!--页眉栏-->
          <el-breadcrumb separator-class="el-icon-arrow-right" style="width:auto;align-content: center;margin-left: 10px">
            <el-breadcrumb-item :to="{path:'/index1'}">系统首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/order1'}">订单管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/member1'}">会员管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/goods'}">商品管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/data1'}">数据分析</el-breadcrumb-item>
            <el-breadcrumb-item >Doing</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 头像 -->
          <div style="flex:1;  display: flex; align-items: center;justify-content: flex-end;">
            <el-dropdown>
      <span >
         <img src="../assets/touxiang.png" alt="touxiang" style="height: 50px;width: 50px;">
        <span style="font-family: 华文楷体;font-size:20px">管理</span>
        <el-icon ><arrow-down /></el-icon>
      </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="$router.push('/self1')" target="_self">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="outAccount">退出账号</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

        </el-header>



        <!--内容区-->
        <el-main class="custom-main">

          <el-card style="width: 33%;margin-right: 10px">
            <sp-chart style="margin-left: 10px;margin-bottom: 10px"> 欢迎回来 , 今天也是美好的一天</sp-chart>
            <br>
            <el-calendar style="margin-top:20px;margin-bottom: 10px"></el-calendar>
          <!-- 日志-->
            <el-button type="primary" @click="getnotice()"
            >查看日志</el-button
            >
            <el-button type="primary" @click="dialog=true"
            >提交日志</el-button
            >
            <el-drawer
                v-model="table"
                title="查看日志!"
                direction="rtl"
                size="50%"
            >
              <el-table :data="gridData">
                <el-table-column property="journalId" label="ID" width="150" />
                <el-table-column property="logDate" label="日期" width="150" />
                <el-table-column property="loggerName" label="管理员" width="200" />
                <el-table-column property="contents" label="日志" />

              </el-table>
            </el-drawer>

            <el-drawer
                v-model="dialog"
                title="提交日志!"
                :before-close="handleClose"
                direction="ltr"
                class="demo-drawer"
            >
              <div class="demo-drawer__content">
                <el-form :model="form2">
                  <el-form-item label="Name" :label-width="formLabelWidth">
                    <el-input v-model="form2.loggerName" autocomplete="off" />
                  </el-form-item>

                  <el-form-item label="notice" :label-width="formLabelWidth">
                    <el-input v-model="form2.contents" autocomplete="off" />
                  </el-form-item>

                </el-form>
                <div class="demo-drawer__footer">
                  <el-button @click="cancelForm">Cancel</el-button>
                  <el-button type="primary" :loading="loading" @click="onClick">
                    {{ loading ? 'Submitting ...' : 'Submit' }}
                  </el-button>
                </div>
              </div>
            </el-drawer>
          </el-card >
          <el-card style="width: 70% ">
            <!--  动态视图-->
            <div slot="header" class="clearfix">

                <el-row :gutter="16">
                  <el-col :span="8">
                    <div class="statistic-card">
                      <el-statistic :value="8500">
                        <template #title>
                          <div style="display: inline-flex; align-items: center">
                            入库量
                            <el-tooltip
                                effect="dark"
                                content="Number of GoodS which logged into the product in one day"
                                placement="top"
                            >
                              <el-icon style="margin-left: 4px" :size="12">
                                <Warning />
                              </el-icon>
                            </el-tooltip>
                          </div>
                        </template>
                      </el-statistic>
                      <div class="statistic-footer">
                        <div class="footer-item">
                          <span>than yesterday</span>
                          <span class="green">
              20%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="statistic-card">
                      <el-statistic :value="88888">
                        <template #title>
                          <div style="display: inline-flex; align-items: center">
                            销售总额
                            <el-tooltip
                                effect="dark"
                                content="total sales of the product in one day"
                                placement="top"
                            >
                              <el-icon style="margin-left: 4px" :size="12">
                                <Warning />
                              </el-icon>
                            </el-tooltip>
                          </div>
                        </template>
                      </el-statistic>
                      <div class="statistic-footer">
                        <div class="footer-item">
                          <span>month on month</span>
                          <span class="red">
              12%
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="statistic-card">
                      <el-statistic :value="500" title="New transactions today">
                        <template #title>
                          <div style="display: inline-flex; align-items: center">
                            新增用户
                          </div>
                        </template>
                      </el-statistic>
                      <div class="statistic-footer">
                        <div class="footer-item">
                          <span>than yesterday</span>
                          <span class="green">
              16%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
                        </div>
                        <div class="footer-item">
                          <el-icon :size="14">
                            <ArrowRight />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <div style="width: 600px; height: 400px;">
                    <echarts :option="optionHistogram" />
                  </div>
                  <div style="width: 600px; height: 400px;">
                    <echarts :option="option" />
                  </div>
                </el-row>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed , onUnmounted, onMounted } from 'vue';
import { Avatar, School, Share, Shop } from "@element-plus/icons-vue";
import { ElMessage , ElMessageBox , ElDrawer} from 'element-plus';
import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
} from '@element-plus/icons-vue'
import axios from 'axios';
const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
      `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
      () => true,
      () => false
  )
}
// 使用 ref 来创建响应式数据
const isCollapse = ref(false);
const asideWidth = computed(() => isCollapse.value ? '64px' : '200px');

// 定义方法
function handleCollapse() {
  isCollapse.value = !isCollapse.value;
  ElMessage({
    message: isCollapse.value ? 'Collapsed' : 'Expanded',
    type: 'info'
  });
}

const HistogramData = ref([]);//柱状图
let intervalId = null;//计时器
const data = ref([//折线图
  { value: 10, name: 'a' },
  { value: 20, name: 'b' },
  { value: 30, name: 'c' },
  { value: 40, name: 'd' },
  { value: 50, name: 'e' },
  { value: 60, name: 'f' },
]);
intervalId = setInterval(() => {
  data.value = data.value.map(item => ({
    ...item,
    value: Math.random() * 100
  }));
}, 2000);
onUnmounted(() => {
  clearInterval(intervalId);
});

//使用computed能够使option自动响应data的变化而更新。
const optionHistogram = computed(() => {
  return ({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: HistogramData.value.map(item => item.commodityName),
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '库存',
        type: 'bar',
        barWidth: '60%',
        data: HistogramData.value.map(item => item.commodityInventory),
      }
    ],
  })
});
// 异步函数来获取数据
onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:918/commodity/getall');
    HistogramData.value = response.data; // 假设后端返回的数据格式与chartData的期望格式一致
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
});
/*
使用了onMounted生命周期钩子来确保在组件挂载到DOM之后立即获取数据。
这是因为在组件挂载之前，DOM可能还未准备好，
而你可能需要等待DOM就绪才能进行某些操作
（尽管在这个特定的例子中可能不是必需的，但这是一个好习惯）
 */
const option = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: data.value.map(item => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.value.map(item => item.value),
        type: 'line',
      },
    ],
  }
});

const formLabelWidth = '80px';
let table = ref(false);
let dialog = ref(false);
const loading = ref(false);

const form2 = ref({
  loggerName: '',
  contents: '',
});
const gridData =ref([]) ;

// 方法
const onClick = () => {
  loading.value = true;
  subnoticed();
  setTimeout(() => {
    loading.value = false;
    dialog.value = false;
  }, 400);
};

const handleClose = (done) => {
  if (loading.value) {
    return;
  }
  ElMessageBox.confirm('Do you want to submit?')
      .then(() => {
        loading.value = true;
        const timerId = setTimeout(() => {
          done();
          setTimeout(() => {
            loading.value = false;
          }, 400);
        }, 2000);
        // 清理定时器，虽然在这个例子中可能不是必须的，但在组件卸载时应该清除
        onUnmounted(() => clearTimeout(timerId));
      })
      .catch(() => {
        // catch error
      });
};

const cancelForm = () => {
  loading.value = false;
  dialog.value = false;
  // 清理可能存在的定时器
  if (timer) {
    clearTimeout(timer);
  }
};

//查看日志
async function getnotice() {
  table.value = true;
  try {
    const response = await axios.get('http://localhost:918/journal/getJournal');
    gridData.value = response.data;
  } catch (error) {
  }
}
//编写日志
async function subnoticed() {
  try {
    const response = await axios.post('http://localhost:918/journal/add',form2.value);

    if (response.status === 200) {

        alert('提交成功!');

    }
  } catch (error) {
    console.error('请求失败:', error);
    alert('请求失败，请检查网络连接或稍后重试!');
  }
}
//退出账号
function outAccount() {
  window.sessionStorage.removeItem('token');
  window.location.href = '/';
}
</script>
<style scoped>
/* 你可以在这里添加CSS样式 */
.el-menu-item:hover{
  color:#fff;
}

.el-menu-item{
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 8px ;
}
.custom-main {
  min-height: 100vh;
  background-color:#eeeeee;
  display: flex;
  overflow-y:auto;
  height: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 8px ;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.4); /* 右侧阴影效果 */
}

.logo-title{
  height: 50px;
  width: 140px;
  border-radius: 8px;
}

.el-header {
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.4); /* 右侧阴影效果 */
  display: flex;
  align-content: center;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 8px ;
}
.is-selected {
  color: #1989fa;
}
.el-calendar{
  background-color: white;
  height: 550px;
  width: 400px;
  border-radius: 8px;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.4); /* 右侧阴影效果 */
}

.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 8px;
}

.grid-content {
  border-radius: 8px;
  min-height:10px;
}
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  background-color: var(--el-bg-color-overlay);
  border-radius: 8px;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.4); /* 右侧阴影效果 */
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}

</style>